<template>
	<view>
		<!-- 话题详情 -->
		<!-- 内容 -->
		<view class="lfy_goods_box">
			<div class="goods topic">
				<p class="time">发布时间：{{topic.issue}}</p>
				<div class="topic_img_box">
					<img :src="topic.topicImg" alt="" />
				</div>
				<p class="goods_introduce">{{topic.introduce}}</p>
				<div class="topic_seller_info">

					<span>
						<i class="el-icon-thumb"></i>
						{{topic.thumb}}
					</span>
					<span>
						<i class="el-icon-view"></i>
						{{topic.see}}
					</span>
					<span>
						<i class="el-icon-chat-dot-round"></i>
						{{topic.evaluate}}
					</span>
				</div>
			</div>
		</view>
		<!--  -->
		<view class="lfy_goods_box">
			<div class="goods">
				<view class="info_flex">
					<span class="info_left">
						<img class="seller_head_portrait" :src="topic.headPortrait" alt="">
						<span class="fans_box">
							<p class="seller_name">{{topic.authorName}}</p>
							<span class="fans">粉丝:{{topic.fans}}</span>
							<span>关注:{{topic.follow}}</span>
						</span>
					</span>
					<u-button @click='follow(topic)' class="follow_btn" type="primary">
						{{topic.guanzhu=='1'?'已关注':'+关注'}}
					</u-button>
				</view>
			</div>
		</view>
		<!-- 全部评论 -->
		<view class="lfy_goods_box ">
			<div class="goods">
				<p class="title">全部评论</p>
				<view class="leave_message_box" v-for="item in message" :key="item.id">
					<view class="leave_message">
						<span class="message_left">
							<img class="message_head_portrait" :src="item.headPortrait" alt="">
							<p class="message_name">{{item.messName}}</p>
						</span>
						<view>
							<u-icon @click='dian(item)' size="20" name="thumb-up-fill"></u-icon>
							<span
								style='font-size: 13upx; margin-left:44upx;margin-top: -34upx;display: block;'>{{item.dian}}</span>
						</view>
					</view>
					<p class="message_con">{{item.messContent}}</p>
					<span class="message_time">1分钟前</span>
				</view>
			</div>
		</view>
		<!-- 其他话题 -->
		<p class="other">-其他话题-</p>
		<!--  -->
		<view class="topic_container">
			<view class=" topic_box">
				<div class="goods topic">
					<p class="goods_introduce mar_0">{{topic.introduce}}</p>
					<div class="topic_img_box">
						<img :src="topic.topicImg" alt="" />
					</div>
					<!-- <view class="info_flex">
						<span class="info_left ">
							<img class="topic_head_portrait_width" :src="topic.headPortrait" alt="">
							<span class="fans_box fans_box_mar">
								<p class="seller_name font_size">{{topic.authorName}}</p>
								<span class="fans fans_mar">粉丝:{{topic.fans}}</span>
								<span>关注:{{topic.follow}}</span>
							</span>
						</span>
						<div class="info_right">
							<p>
								<i class="el-icon-chat-dot-square"></i>
								{{topic.thumb}}
							</p>
							<p>
								<i class="el-icon-view"></i>
								{{topic.see}}
							</p>
						</div>
					</view> -->

				</div>
			</view>
			<view class=" topic_box">
				<div class="goods topic">
					<p class="goods_introduce mar_0">{{topic.introduce}}</p>
					<div class="topic_img_box">
						<img :src="topic.topicImg" alt="" />
					</div>
					<!-- <view class="info_flex">
						<span class="info_left ">
							<img class="topic_head_portrait_width" :src="topic.headPortrait" alt="">
							<span class="fans_box fans_box_mar">
								<p class="seller_name font_size">{{topic.authorName}}</p>
								<span class="fans fans_mar">粉丝:{{topic.fans}}</span>
								<span>关注:{{topic.follow}}</span>
							</span>
						</span>
						<div class="info_right">
							<p>
								<i class="el-icon-chat-dot-square"></i>
								{{topic.thumb}}
							</p>
							<p>
								<i class="el-icon-view"></i>
								{{topic.see}}
							</p>
						</div>
					</view> -->

				</div>
			</view>
		</view>

		<!-- fixed -->
		<view class="fixed">
			<span class="operation_left">
				<span v-if="iszan1" @click='zan()'>
					<u-icon size="22" name="thumb-up-fill"></u-icon>点赞
				</span>
				<span v-if="iszan" @click='zan()'>
					<u-icon color="#28d2d1" size="22" name="thumb-up-fill"></u-icon>已赞
				</span>
				<span>
					<u-icon @click="show = true" size="22" name="chat-fill"></u-icon>评论
					<u-popup :show="show" @close="close" @open="open">
						<view style="width:100%;height:300upx;">
							<view style="display: flex;width: 80%;margin: 400upx auto; margin-top:150upx;">
								<input placeholder="请输入内容" v-model="value"
									style="border: 1px solid #999;padding-left: 30upx; width:70%;height: 35px;border-radius: 30px;"
									type="text" />
								<u-button @click='fabu()'
									style='width: 20%;margin-left: 20upx;margin-top: -3upx;border-radius: 30px;'
									type="primary" text="发布"></u-button>
							</view>
						</view>
					</u-popup>
				</span>
				<span v-if="isshou1" @click='shou'>
					<u-icon size="22" name="star-fill"></u-icon>收藏
				</span>
				<span v-if="isshou" @click='shou'>
					<u-icon size="22" color="#28d2d1" name="star-fill"></u-icon>已藏
				</span>
			</span>
			<u-button class="want_btn" type="primary" text="我想要"></u-button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				topic: {},
				message: [],
				ids: '',
				// 点赞
				iszan1: true,
				iszan: false,
				// 收藏
				isshou1: true,
				isshou: false,
				// 弹出
				show: false,
				// input框的value
				value: ''
			}
		},
		onLoad(option) {
			this.ids = option.id
			this.$api.searchTopic({
					// id: option.id
					id: this.ids
				}).then(res => {
					this.topic = res.data
					console.log(this.topic)

				}),
				// 全部评论
				this.$api.lfymessage().then(res => {
					this.message = res.data
				})
		},
		methods: {
			// 关注
			follow() {
				console.log(this.topic.guanzhu)
				if (this.topic.guanzhu == '0') {
					let a = {
						id: this.topic.id,
						guanzhu: '1',
						// 关注的数量+1
						follow: Number(this.topic.follow) + 1
					}
					this.$api.upTFollow(a).then(res => {
						this.$api.searchTopic({
							id: this.ids
						}).then(res => {
							this.topic = res.data
							console.log(this.topic)
						})
						this.$api.lfymessage().then(res => {
							this.message = res.data
						})

					})
				} else {
					let a = {
						id: this.topic.id,
						guanzhu: '0',
						follow: Number(this.topic.follow) - 1
					}
					this.$api.upTFollow(a).then(res => {
						this.$api.searchTopic({
							id: this.ids
						}).then(res => {
							this.topic = res.data
							console.log(this.topic)
						})
						this.$api.lfymessage().then(res => {
							this.message = res.data
						})
					})
				}


			},
			// 评论点赞
			dian(item) {
				console.log(Number(item.dian) + 1)
				console.log(item.state)
				if (item.state == 0) {
					this.$api.upTMessage({
						id: item.id,
						dian: Number(item.dian) + 1,
						state: 1
					}).then((res) => {

						console.log(res)
						this.$api.lfymessage().then(res => {
							this.message = res.data
						})
					})
				} else {
					this.$api.upTMessage({
						id: item.id,
						dian: Number(item.dian) - 1,
						state: 0
					}).then((res) => {
						console.log(res)
						this.$api.lfymessage().then(res => {
							this.message = res.data
						})
					})
				}

			},
			// 点赞
			zan() {
				this.iszan = !this.iszan
				this.iszan1 = !this.iszan

			},
			// 收藏
			shou() {
				this.isshou1 = !this.isshou1
				this.isshou = !this.isshou
			},
			open() {},
			// 发布
			close() {
				this.show = false
			},
			fabu() {
				console.log(this.value)
				let a = {
					headPortrait: 'http://127.0.0.1:7001/public/lfyimg/head_portrait_01.png',
					messName: '滚滚长江东逝水',
					messContent: this.value,
					dian: '0',
					state: '0'
				}
				this.$api.addTMessage(a).then(res => {
					this.show = false
					this.$api.lfymessage().then(res => {
						this.message = res.data

					})
				})
			}
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}

	// 内容
	.lfy_goods_box {
		padding: 40upx 40upx 0;

	}

	.goods {
		padding: 30upx;
		background-color: #fff;
		box-shadow: 0upx 10upx 40upx #edeaef;
		border-radius: 20upx;
	}

	.time {
		color: #999;
		font-size: 20upx;
		text-align: right;
		height: 40upx;
		line-height: 40upx;
	}

	.topic_head_portrait {
		height: 100%;
	}

	.topic_img_box {
		// margin-top: 20upx;
	}

	.topic_img_box img {
		width: 100%;
	}

	.topic .goods_introduce {
		color: #666;
		margin: 10upx 0 60upx;
	}

	.topic_seller_info {
		display: flex;
		justify-content: space-around;
		border-top: 2upx solid #dddddd;
		padding-top: 20upx;
	}

	.topic_seller_info span {
		color: #999;
		font-size: 22upx;
	}

	.topic_seller_info span i {
		margin-right: 10upx;
	}

	// 
	.info_flex {
		display: flex;
		justify-content: space-between;
		height: 60upx;
		// padding: 20upx 0;
	}

	.seller_head_portrait {
		height: 100%;
	}

	.seller_name {
		color: #666;
		font-size: 25upx;
	}

	.fans_box {
		color: #999;
		font-size: 18upx;
		margin-left: 20upx;
		float: right;
	}

	.fans_box .fans {
		margin-right: 20upx;
	}

	.follow_btn {
		width: 25%;
		color: #333;
		background-color: #28d2d1;
		border: none;
		border-radius: 20upx;
		height: 100%;
	}

	// 全部评论
	.leave_message {
		display: flex;
		justify-content: space-between;
		height: 60upx;
		padding: 20upx 0 0 30upx;
	}

	.message_name {
		color: #666;
		font-size: 25upx;
		float: right;
		line-height: 60upx;
		margin-left: 20upx;
	}

	.message_head_portrait {
		height: 100%;
	}

	.message_con {
		color: #999;
		font-size: 25upx;
		padding-left: 110upx;
	}

	.message_time {
		color: #999;
		font-size: 20upx;
		padding-left: 110upx;
	}

	.title {
		border-left: 4upx solid #28d2d1;
		color: #666;
		font-size: 32upx;
		padding-left: 10upx;
	}

	// 其他话题
	.other {
		color: #999;
		height: 60upx;
		line-height: 60upx;
		padding: 30upx;
		text-align: center;

	}

	// 
	.topic .mar_0 {
		margin-bottom: 10upx;
		margin-top: 0;
	}

	.topic_box {
		// margin: 40upx 0 0;
		width: 47%;
		background-color: #fff;
		box-shadow: 0upx 10upx 40upx #edeaef;
		border-radius: 20upx;
	}

	.topic_box .goods_introduce {
		font-size: 20upx;
	}

	.info_right p {
		font-size: 18upx;
		color: #999;
	}

	.info_right p i {
		margin-right: 5upx;
	}

	.font_size {
		font-size: 20upx;
	}

	.topic_head_portrait_width {
		width: 50upx;
	}

	.fans_box_mar {
		margin-left: 10upx;
	}

	.fans_box_mar .fans_mar {
		margin-right: 5upx;
	}

	.topic_container {
		padding: 0 40upx;
		display: flex;
		justify-content: space-between;
		padding-bottom: 200upx;
	}

	// fixed
	.fixed {
		width: 100%;
		padding: 30upx;
		position: fixed;
		bottom: 0;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		box-sizing: border-box;
	}


	.operation_left {
		width: 50%;
		display: flex;
		justify-content: space-between;
	}

	.operation_left span {
		color: #999;
		font-size: 20upx;
	}

	.want_btn {
		width: 20%;
		color: #fff;
		background-color: #28d2d1;
		border: none;
		border-radius: 30upx;
	}
</style>
